<script>

    import {onMount} from 'svelte'
    import { get, writable } from "svelte/store";

    let users = [];
    var addname = "";
    var xiugainame = "";
    var xiugaipassword = "";
    var xiugainewpassword = "";
    var addid = "";
    var addgender = "";
    var addage = 0;
    let nowxiugainame = writable("");
    let nowxiugaiid = writable(0);
    let isxiugaishow = writable(false);
    let isaddshow = writable(false);
    isxiugaishow.set(false);
    isaddshow.set(false);

    onMount(async () =>{
    const response = await fetch(`/api/admin`);
    if(response.ok){
      users = await response.json();
    }
  })

  function handlerxiugaiClick(event){
    nowxiugainame.set(event.target.id);
    nowxiugaiid.set(event.target.value);
    isxiugaishow.set(true);
  }
  function handleraddClick(event){
    const value = event.target.value;
    if(value === 'add'){
        //这里是执行编辑的功能，那就是需要弹出一个方框，然后能在里面修改学生信息
        isaddshow.set(true);
  }
}

  function xhanderClick(){
    isxiugaishow.set(false);
    isaddshow.set(false);
  }

  //这个是修改user的密码，看能不能对修改到student的密码。
  function funcxiugaipassword(){
    const request = {
        id : $nowxiugaiid,
        password : xiugaipassword,
        newpassword : xiugainewpassword,
    }
    console.log(request);
    fetch("/api/xiugai",{
        method:"PATCH",
        headers:{
            "Content-Type":"application/json"
        },
        body:JSON.stringify(request)
    })
    .then((response)=>response.json())
    .then((data)=>{
        console.log("此时来自后端的相应为：",data);
        if(data.error ==="success"){
            alert("修改成功！")
            isxiugaishow.set(false);
            users = data.data;
        }
        else{
            alert("原密码错误！请重新输入");
        }
    })
    
  }


  function addStudent(){
    const request = {
        studentname:addname,
        id :addid,
        gender:addgender,
        age :addage,
    }
    fetch("/api/add",{
        method:"PATCH",
        headers:{
            "Content-Type":"application/json"
        },
        body:JSON.stringify(request)
    })
    .then((response)=>response.json())
    .then((data)=>{
        console.log("此时来自后端的相应为：",data);
        if(data.error ==="success"){
            alert("添加成功！")
            isaddshow.set(false);
        }
        else{
            alert("添加失败！请检查信息是否有误！")
        }
       users = data.data;
    })
  }

  function gotoTeacher(){
    window.location.href = "/admin/teacher"
  }
  function gotoCourse(){
    window.location.href = "/admin/course"
  }

</script>

<div>
  
</div>

<ul>
    <p>学生列表如下：</p>
    <button value="add" on:click={handleraddClick}>新增</button>
    {#each users as user}
      <li>
        <div>
          <b>学号： {user.id}</b>
          <b>姓名： {user.studentname}</b>
          <b>性别： {user.gender}</b>
          <b>年龄： {user.age}</b>
          <b>密码：{user.password}</b>
          <button class="mybutton" id={user.studentname} value={user.id} on:click={handlerxiugaiClick}>修改</button>
          <button class="mybutton" value="delete" >删除</button>
        </div>
      </li>
    {/each}
  </ul>
    <div class="button-container">
    <button class="mybutton" on:click={gotoTeacher}>教师表</button>
    <button class="mybutton"on:click={gotoCourse}>课程表</button>
</div>
  

<div class="modal" style="display:{$isxiugaishow ? 'block' : 'none'}">
<div class="弹窗" style="display:{$isxiugaishow ? 'block' : 'none'}">
    <h1>修改{$nowxiugainame}的密码</h1>
    <button class="xbutton" on:click={xhanderClick}>&times</button>
    <span class="inline-block-element">
        <b >原密码</b>
        <input  class="inline-block-element" placeholder="原密码" type="text" bind:value={xiugaipassword} required/>
    </span>
    <span class="inline-block-element">
        <b >新密码</b>
        <input  placeholder="密码" type="text" bind:value={xiugainewpassword}>
    </span>
    <button class="mybutton" on:click={funcxiugaipassword}>确定</button>
    <button class="mybutton" on:click={xhanderClick}>取消</button>

</div>
</div>

<div class="modal" style="display:{$isaddshow ? 'block' : 'none'}">
    <div class="弹窗" style="display:{$isaddshow ? 'block' : 'none'}">
        <h1>添加学生信息</h1>
        <button class="xbutton" on:click={xhanderClick}>&times</button>
        <span class="inline-block-element">
            <b >姓名</b>
            <input  class="inline-block-element" placeholder="姓名" type="text" bind:value={addname} required/>
        </span>
        <span class="inline-block-element">
            <b >学号</b>
            <input  placeholder="学号" type="number"  step=1 bind:value={addid} required/>
        </span>
        <span class="inline-block-element">
            <b >性别</b>
            <input  placeholder="性别" type="text" bind:value={addgender} required/>
        </span>
        <span class="inline-block-element">
            <b >年龄</b>
            <input  placeholder="年龄" type="number" step=1 bind:value={addage} required/>
        </span>
        <button class="mybutton" on:click={addStudent}>确定</button>
        <button class="mybutton" on:click={xhanderClick}>取消</button>
    </div>
</div>


  <style>

.modal {
  display: none; /* 在开始时隐藏 modal */
  position: fixed; /* 在全屏下保持定位 */
  z-index: 1; /* 坐落在其他内容上方 */
  left: 0;
  top: 0;
  width: 100%; /* 完整的宽度 */
  height: 100%; /* 完整的高度 */
  overflow: auto; /* 需要时启用滚动条 */
  background-color: rgb(0,0,0); /* 遮罩层背景色 */
  background-color: rgba(0,0,0,0.4); /* 可以添加透明度效果 */
}

.inline-block-element {
        /* display: flex; */
        align-items: center;
    }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li {
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 20px;
  }

  li:nth-of-type(4n+1) {
    background-color: #FAF0E6;
  }

  li:nth-of-type(4n+2) {
    background-color: #FFF0F5;
  }

  li:nth-of-type(4n+3) {
    background-color: #F0FFF0;
  }

  li:nth-of-type(4n) {
    background-color: #F0F8FF;
  }

  li > div {
    display: flex;
    justify-content: space-around;
  }

  .mybutton {
    flex-shrink: 0;  
    margin: 0 15px;  
    padding: 10px 20px;  
    background-color: #38a1db;
    color: #ffffff;
    border: 1px solid #38a1db;
    cursor: pointer;
    transition: .4s;
  }
  .button-container {
    display: flex;
    gap: 500px; /* 设置按钮之间的间隔距离 */
  }

  p
  {
    font-size: 10px;
      font-weight: bold;
      text-align: center;
      padding: 20px;
      background-color: #007bff;
      color: #fff;
  }
  .弹窗 input {
      margin-bottom: 10px;
      padding: 5px;
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 4px;
      color: black;
    }

  .mybutton:hover {
    background-color: #ffffff;
    color: #38a1db;
  }

  .弹窗{
    border: none;
    display:flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    width:30%;
    height: 400px;
    background: lightblue;
    position: fixed;
    padding: 40px 40px;
    left:36%;
    top:30%;
    border-radius: 10px;
    border: none;
  }
   .xbutton{
    position: absolute;
    top: 0; 
    right: 19px; 
    margin: -15px -10px 0 auto;
    width: 20px;
    height: 40px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
  }



  </style>